<template>
        <div>
          <div>{{ state }}</div>
          <button @click="change1">更新对象第一层属性的值</button>
          <button @click="change2">更新对象深层属性的值</button>
        </div>
      </template>
       
      <script setup lang="ts">
      import { shallowReactive } from 'vue'
      const obj = {
        a: 1,
        first: {
          b: 2,
          second: {
            c: 3
          }
        }
      }
       
      const state = shallowReactive(obj)
       
      function change1() {
        state.a +=1;
      }
      function change2() {
        state.first.b = 8
        state.first.second.c = 9
        console.log(state);
      }
      </script> 